// 登录组件
import React, { Component } from 'react'
import {Redirect} from 'react-router-dom'
import './login.less'
import logo from '../../assets/images/logo_1.jpg'
import {Form, Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined } from "@ant-design/icons";

import {reqLogin} from '../../api/index'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'

const Item = Form.Item   //这行不能写到import前面



// 登录的路由组件
export default class Login extends Component {
  // 提交表单
  onFinish = async (values) => {
    const { username, password } = values;
    const response = await reqLogin(username, password);
    console.log(33,response);
    //status的值为0代表成功,为1代表失败
    if (!response.status) {
      message.success("登录成功");

      // 保当前登录的用户信息
      const user = response.data;
      memoryUtils.user = user;   //保存到内存里,刷新会丢失
      storageUtils.saveUser(user);  //保存到local(本地)里

      // 跳转首页,不需要回退回来
      this.props.history.replace("/");
    } else {
      message.error(response.msg);
    }
  }
    render() {
      // 先判断用户是否登录.如果已经登录,就跳转到首页
      const user = storageUtils.getUser()
      if(user._id) {
        return <Redirect to='/' />
      }
        return (
          <div className="login">
            <header className="login-header">
              <img src={logo} alt="logo" />
              <h1>后台管理系统</h1>
            </header>
            <section className="login-content">
              <h2>用户登录</h2>
              <Form
                onFinish={this.onFinish}
                className="login-form"
                initialValues={{
                  username: 'admin',
                  password: 'admin'
                }}
              >
                <Item
                  name="username"
                  validateFirst
                  rules={[
                    {
                      required: true,
                      message: "请输入用户名",
                    },
                    {
                      min: 4,
                      message: "用户名至少4位",
                    },
                    {
                      max: 12,
                      message: "用户名最12位",
                    },
                    {
                      pattern: /^[a-zA-Z0-9_]+$/,
                      message: "用户名必须是英文数字或下划线组成",
                    },
                  ]}
                >
                  <Input
                    prefix={
                      <UserOutlined style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="用户名"
                  />
                </Item>
                {/*密码要求: 4-12位,包含数字字母下划线 */}
                <Item
                  name="password"
                  validateFirst
                  rules={[
                    {
                      required: true,
                      message: "请输入密码",
                    },
                    {
                      min: 4,
                      message: " 密码至少4位",
                    },
                    {
                      max: 12,
                      message: " 密码最12位",
                    },
                    {
                      pattern: /^[a-zA-Z0-9_]+$/,
                      message: "密码必须是英文数字或下划线组成",
                    },
                  ]}
                >
                  <Input
                    prefix={
                      <LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="密码"
                    type="password"
                  />
                </Item>
                <Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    className="login-form-button"
                  >
                    登录
                  </Button>
                </Item>
              </Form>
            </section>
          </div>
        );
    }
}
